<template>
  <div class="mainbox">
    <!-- 左侧盒子 -->
    <div class="column">
      <div class="panel bar">
        <h2>各层级编制数</h2>
        <!-- 图表放置盒子 -->
        <leftChart1 />
        <!-- <div class="chart"></div> -->
        <!-- 伪元素绘制盒子下边角 -->
        <div class="panel-footer" />
      </div>
      <div class="panel line" style="height: 7.94rem">
        <h2>分行业 Top10</h2>
        <leftChart2 />
        <div class="panel-footer" />
      </div>
    </div>
    <!-- 中间盒子 -->
    <div class="column">
      <!-- 头部 no模块 -->
      <div class="panel bar2">
        <h2>各地编制情况</h2>
        <centerChart1 />
        <div class="panel-footer" />
      </div>
      <!-- map模块 -->
      <div class="panel line2">
        <h2>业务量统计</h2>
        <centerChart2 />
        <!-- <div class="chart"></div> -->
        <div class="panel-footer" />
      </div>
      <div class="panel pie2">
        <h2>编制变动情况</h2>
        <centerChart3 />
        <div class="panel-footer" />
      </div>
    </div>
    <!-- 右侧盒子 -->
    <div class="column">
      <div class="panel bar2">
        <h2>5年离退休预测</h2>
        <rightChart1 />
        <div class="panel-footer" />
      </div>
      <div class="panel line2">
        <h2>人员结构</h2>
        <rightChart2 />
        <div class="panel-footer" />
      </div>
      <div class="panel pie2">
        <h2>3年以上未使用空编的部门（单位）</h2>
        <rightChart3 />
        <div class="panel-footer" />
      </div>
    </div>
  </div>
</template>

<script>
import '../../assets/css/bzzy.css'
import leftChart1 from './leftChart1'
import leftChart2 from './leftChart2'
import centerChart1 from './centerChart1'
import centerChart2 from './centerChart2'
import centerChart3 from './centerChart3'
import rightChart1 from './rightChart1'
import rightChart2 from './rightChart2'
import rightChart3 from './rightChart3'
export default {
  name: 'DataView',
  components: {
    leftChart1,
    leftChart2,
    centerChart1,
    centerChart2,
    centerChart3,
    rightChart1,
    rightChart2,
    rightChart3
  },
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    this.cancelLoading()
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.loading = false
      }, 2000)
    }
  }
}
</script>
